<!--菜单2：
建筑基本信息模块-->
<template>
<div class="buildBasicMsg">
    <div>
        <div class="box-top">
            <div class="box-top-big">
                <img src="../../assets/img/hospital.jpg">
            </div>
            <div class="box-top-little">
                <img src="../../assets/img/hospital.jpg">
            </div>
        </div>
        <!--    建筑信息表格-->
        <div class="box-bottom">
            <table cellpadding="0" cellspacing="0" border="1 px" class="Mytable">
                <tr>
                    <td><div><div class="front">建筑名称：</div><div class="back">汝阳县人民医院</div></div></td>
                    <td><div><div class="front">建筑编号：</div><div class="back">1234567889</div></div></td>
                    <td><div><div class="front">所属行政区域：</div><div class="back">汝阳县</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">所属数据中心：</div><div class="back">汝阳县人民医院</div></div></td>
                    <td><div><div class="front">业主：</div><div class="back">汝阳县人民医院</div></div></td>
                    <td><div><div class="front">地址：</div><div class="back">河南省城关镇文化路40号</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">建设年代：</div><div class="back">1952年</div></div></td>
                    <td><div><div class="front">总面积：</div><div class="back">150000.00平方米</div></div></td>
                    <td><div><div class="front">空闲面积：</div><div class="back">0.00平方米</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">实际面积：</div><div class="back">150000.00平方米</div></div></td>
                    <td><div><div class="front">使用人数：</div><div class="back">2700</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                </tr>
                <tr>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                    <td><div><div class="front">建造结构形式：</div><div class="back">其他</div></div></td>
                </tr>
                <tr>
                    <td colspan="3"><div><div class="front">综合：</div><div class="back">汝阳县人民医院</div></div></td>
                </tr>
            </table>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "BuildBasicMsg",
        data() {
            return {

            }
        }
    }
</script>

<style scoped>
    .buildBasicMsg{
        height: 100%;
        width: 100%;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        position: relative;
    }

    .buildBasicMsg > div {
        position: absolute;
        width: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .box-top{
        width: 100%;
        height: 50%;
        text-align: center;
    }
    .box-bottom{
        width: 100%;
        height: 50%;
    }
/*    大图片*/
    .box-top-big{
        width: 100%;
        height: 80%;
    }
    .box-top-big img{
        width: 100%;
        height: 100%;
    }
    .box-top-little{
        width: 100%;
        height: 18%;
        margin-top: 10px;
    }
    .box-top-little img{
        width: 3%;
        height: 30%;
    }
    .Mytable{
        margin: 0 auto;
        font-size: 10px;
    }
    .Mytable tr td{
        width: 240px;
        height: 20px;
    }
    tr td div{
        display: flex;
    }
    .front{
        width: 40%;
        height: 100%;
        margin-left: 10px;
    }
    .back{
        width: 60%;
        height: 100%;

    }
</style>
